<template>
  <div id="">
    <div
        @mouseenter="hove()"
        class="suspension"
        ref="wrapper"
        v-show="!isShowHove"
    >
    </div>
    <div @click.prevent="switchRouter" @mousedown="mousedown( $event)" @mouseleave="leave()"
         @mouseup='mouseup($event)'
         class="hove"
         ref="kongtiao" v-if="isShowHove"
    >
      <div class="nav">
        <div :class="{'active': this.selectionIndex === 0}" class="navTop">视图</div>
        <div class="line"></div>
        <div :class="{'active': this.selectionIndex === 1}" class="navBtm">数据</div>
      </div>
    </div>
  </div>
</template>

<script>
let tagW = 0
let tagH = 0
export default {
  name: 'Suspension',
  props: ['selectionIndex'],
  mounted () {

  },
  data () {
    return {
      index: 0,
      isClick: false,
      tagW: 0,
      tagH: 0,
      startTime: 0,
      sb_bkx: 0,
      sb_bky: 0,
      isLeave: true,
      isShowHove: false,
    }
  },
  methods: {
    mousedown (event) {
      this.index = 1
      // this.isClick = false
      this.startTime = event.timeStamp

      var event = event || window.event
      // let _target = event.target
      let _target = this.$refs.kongtiao
      tagW = _target.offsetWidth
      tagH = _target.offsetHeight
      // 得到当前鼠标的位置
      let startx = event.clientX
      let starty = event.clientY

      // 得到当前鼠标在球内的长和搞
      let sb_bkx = startx - this.$refs.kongtiao.offsetLeft
      let sb_bky = starty - this.$refs.kongtiao.offsetTop
      let ww = document.documentElement.clientWidth
      let wh = window.innerHeight

      if (event.preventDefault) {
        event.preventDefault()
      } else {
        event.returnValue = false
      }
      document.onmousemove = function (ev) {
        let event = ev || window.event
        let scrolltop = document.documentElement.scrollTop || document.body.scrollTop
        if (event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX > ww) {
          return false
        }
        // 得到球的left 和 top值
        let endx = event.clientX - sb_bkx
        let endy = event.clientY - sb_bky
        if (endx <= 0) {
          endx = 0
        } else if (endx >= document.documentElement.clientWidth - tagW){
          endx = document.documentElement.clientWidth - tagW
        }
        if (endy <= 0) {
          endy = 0
        } else if (endy >= document.documentElement.clientHeight - tagH) {
          endy = document.documentElement.clientHeight - tagH
        }
        _target.style.left = endx + 'px'
        _target.style.top = endy + 'px'
      }
    },

    mouseup: function (e) {
      if (this.startTime) {
        let diffTime = e.timeStamp - this.startTime
        // diffTime < 150 && this.isClick() // 小于150就执行单击操作
        console.log(diffTime)
        this.$nextTick(() => {
          if (diffTime <= 150) {
            this.isClick = true
          }
          this.startTime = 0
        })
      }
      // if (this.$refs.kongtiao.offsetLeft === document.documentElement.clientWidth - tagW) {
      //   // this.isShowHove = false
      //   this.index = 0
      //   this.$nextTick(() => {
      //     console.log(this.$refs.wrapper)
      //     if (this.$refs.wrapper) {
      //       this.$refs.wrapper.style.left = null
      //       this.$refs.wrapper.style.right = 0 + 'px'
      //       this.$refs.wrapper.style.top = e.clientY + 'px'
      //     }
      //   })
      // }
      // if (this.$refs.kongtiao.offsetLeft === 0) {
      //   console.log(111)
      //   this.index = 0
      //   // this.isShowHove = false
      //   this.$nextTick(() => {
      //     this.$refs.wrapper.style.left = 0 + 'px'
      //     this.$refs.kongtiao.style.left = 0 + 'px'
      //   })
      // }
      document.onmousemove = null
    },
    switchRouter () {
      this.$nextTick(() => {
        if (this.isClick) {
          this.$emit('switchRouter')
          this.isClick = false
        }
      })
    },
    hove () {
      this.isShowHove = true
    },
    leave () {
      if (this.index === 0) {
        this.isShowHove = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .suspension {
    /*background-image: url("../assets/img/qiu.png");*/
    width: 10px;
    height: 70px;
    background-color: #66645d;
    position: absolute;
    bottom: 200px;
    right: 0;
    border-radius: 5px;
    z-index: 999;
  }

  .hove {
    position: absolute;
    right: 0;
    bottom: 200px;
    z-index: 999;
    width: 90px;
    height: 94px;
    background-color: transparent;
    background-image: url('../assets/img/qiu.png');
    cursor: pointer;

    .nav {
      position: relative;
      font-size: 14px;
      margin-top: 23px;
      margin-left: 32px;
      color: white;
      width: 30px;
      z-index: -1;

      div {
        /*line-height: 20px;*/
      }

      .navBtm {
        width: 30px;
        cursor: pointer;
        /*margin-top: 2px;*/
      }

      .navTop {
        width: 30px;
        cursor: pointer;
        /*margin-bottom: 5px;*/
      }

      .active {
        color: #FDF27D;
      }

      .line {
        width: 20px;
        margin-left: 4px;
        height: 1px;
        background-color: rgba(0, 255, 255, 1);
      }
    }
  }
</style>
